<template>
    
    <div class="vertical">
        <div style="width: 100%;background-color: #0079fe;">
            <h2 style="color: aliceblue;">教材信息列表</h2>
        </div>

        <div style="width: 100%;">
            <el-row class="search">
                <el-col :span="2">
                    <span> IBSN</span>
                </el-col>
                <el-col :span="2">
                    <el-input v-model="input1" style="width: 100px" placeholder="IBSN" />
                </el-col>
                <el-col :span="2">
                    <span> 教材名</span>
                </el-col>
                <el-col :span="2">
                    <el-input v-model="input2" style="width: 100px" placeholder="教材名" />
                </el-col>
                <el-col :span="2">
                </el-col>
                <el-col :span="2">
                    <el-form-item>
                        <el-button type="primary" @click="search()">搜索</el-button>
                    </el-form-item>
                </el-col>

            </el-row>
        </div>

        <div style="width: 100%;">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" label="序号" width="80" />
                <el-table-column prop="ISBN" label="IBSN" width="120" />
                <el-table-column prop="bookName" label="教材名" width="120" />
                <el-table-column prop="courseName" label="对应课程" width="120" />
                <el-table-column prop="bookCount" label="单价" width="120" />
                <el-table-column prop="bookCount" label="初库存" width="120" />
                <el-table-column prop="bookCount" label="最终库存" width="120" />
                <el-table-column prop="teacher" label="出版社" width="120" />
                <el-table-column prop="teacher" label="审核人" width="120" />
            
            </el-table>
        </div>
                <div>
      <!-- 分页 -->
   <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[10, 20, 30, 40]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total=total
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 10px;"
    />
    </div>
    </div>

</template>


<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
import { useRouter} from 'vue-router';
import { useRoute} from 'vue-router';

const router =useRouter()

var input1 = ref('')
var input2 = ref('')

// 分页
const currentPage4 = ref(1)
const pageSize4 = ref(5)
const total=ref(1)


const tableData = ref([])

// 搜索
function search(){
    var param={
        student_id:input1.value,
        name:input2.value,
    
        page:currentPage4.value,
        pageSize:pageSize4.value
    }
    axios.get("http://localhost:8000/textbook/getdata/", {
        params: param
    })
    .then(res => {
        tableData.value = res.data.data[0]
        total.value=res.data.total
        console.log(res);
    })
}

// 获取首页数据
function getdata() {
    axios.get("http://localhost:8000/textbook/getdata/",{
        params:{
            page:currentPage4.value,
            pageSize:pageSize4.value
        }
    }
    )
        .then(res => {
            tableData.value = res.data.data[0]
            total.value=res.data.total
            console.log(res);
            console.log(res.data.data);
            console.log(tableData.value);

            console.log(res)
        })
        .catch(err => {
            console.error(err);
        })
}

//分页
function handleSizeChange(size) {
    pageSize4.value = size
    // daishanchu.value=item
    getdata()
}
function handleCurrentChange(page) {
    currentPage4.value = page
    getdata()
}

const message = ref('Hello, Vue 3!');
onMounted(() => {
    // Your code here
    getdata()

});

// 在组件卸载前执行的操作
onUnmounted(() => {

});



</script>
<style>
.vertical {
    /* display: flex; */
    flex-direction: column;
    gap: 10px;
    /* 可选：设置子元素之间的间距 */
}
</style>
